<template>
  <div>
    <!-- :disabled='postDataArr.length=uploadLimit'   :class="upload-demo"-->
    <el-upload :limit="uploadLimit" action="#" :multiple="true" :disabled="disabled" :accept="acceptType" :file-list="fileList" :list-type="listType" :on-exceed="outOfRange" :before-upload="beforeAvatarUpload" :http-request="fnAttrPicUploadRequest" :on-remove="beforeRemoveFile" :on-preview="onPreviewHandler" :class="(disabled || fileList.length >= uploadLimit)?'hide':''">
      <i v-if="listType === 'picture-card' && !disabled" class="el-icon-plus avatar-uploader-icon" />
      <div v-if="listType === 'text' && !disabled" class="text-style">
        <img src="../../assets/common/upload.png" alt="">
        <p>{{ text }}</p>
      </div>
    </el-upload>
    <el-dialog :visible.sync="previewVisible">
      <img width="100%" :src="previewUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import validateDocumentType from './documentType.js'
import { downloadUrl } from '@/utils/index'
export default {
  props: {
    tip: {
      type: String,
      default: ''
    },
    uploadLimit: {
      type: Number,
      default: 6,
      required: false
    },
    acceptType: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    listType: {
      type: String,
      default: 'picture-card',
      required: false
    },
    text: {
      type: String,
      default: '支持pdf、excel等文件',
      required: false
    }
  },
  data() {
    return {
      user: {},
      avatar: '',
      dialogImageUrl: '',
      dialogVisible: false,
      headers: {
        authorization: ''
      },
      imageFile: '',
      catalog: 'feedback',
      paramsData: null,
      postDataArr: [],
      isHideUpload: false,
      imageAction: '',
      requstName: '',
      value: '',

      previewVisible: false,
      previewUrl: ''
    }
  },
  computed: {
    ...mapGetters(['name', 'roles', 'email', 'token', 'user_id'])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        username: this.name,
        role: this.roles.join(' | '),
        email: this.email,
        avatar: this.avatar
      }
      this.headers.authorization = 'Bearer ' + this.token
    },
    fnAttrPicUploadRequest(req) {
      console.log(req.file, 'req.file>>>>>>')
      if (req.file.type.indexOf('image') === 0) {
        const formData = new FormData()
        formData.append('image', req.file)
        this.$http
          .post(`/upload/image`, formData)
          .then((res) => {
            if (res.code === 10000) {
              this.$message.success('上传成功')
              this.$emit('handleImageSuccess', {
                name: req.file.name,
                url: res.data
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        const formFileData = new FormData()
        formFileData.append('file', req.file)
        this.$http
          .post(`/upload/file`, formFileData)
          .then((res) => {
            if (res.code === 10000) {
              this.$message.success('上传成功')
              this.$emit('handleImageSuccess', {
                name: req.file.name,
                url: res.data
              })
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    outOfRange() {
      this.$message.warning(`最多只能上传 ${this.uploadLimit} 个文件`)
    },
    // 上传文件之前的钩子，用来做类型、大小等的校验
    beforeAvatarUpload(file) {
      const acceptFileType = this.acceptType.split(',')
      const flag = validateDocumentType(file, acceptFileType)
      return flag
    },
    // 删除图片
    beforeRemoveFile(file) {
      this.$emit('beforeRemoveFile', file)
    },
    // 点击
    onPreviewHandler(e) {
      console.log(e)
      downloadUrl(e.url)
    }
  }
}
</script>
<style scoped>
/deep/ .hide .el-upload--picture-card {
  display: none !important;
}
/deep/ .image-uploader {
  display: inline-block;
}
/deep/ .image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .image-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .image-uploader .el-upload [class^="el-icon"] {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.image-list,
.image-item {
  display: flex;
  .image-wrap {
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    margin: 0 8px 8px 0;
    vertical-align: top;
    &:hover {
      .icon-wrap {
        opacity: 1;
      }
    }
    .icon-wrap {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 30px;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.7);
      transition: opacity 0.3s;
      .el-icon-zoom-in {
        cursor: pointer;
        margin-right: 8px;
      }
      .el-icon-delete {
        cursor: pointer;
      }
    }
  }
}

.image-item {
  display: inline-flex;
}
.text-style {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  padding: 10px;
  img {
    width: 14px;
  }
  p {
    font-size: 14px;
    color: #bababa;
    line-height: 20px;
    margin-left: 8px;
  }
}
.text-style:hover {
  border-color: #c0c4cc;
}
</style>
